<template>
	<view class="tab-course-en">
		<view class="item uv-flex-row">
			<view class="title">
				<uv-text text="单词循环次数" size="16px" color="#BABAD8" margin="0 0 4px 0"></uv-text>
				<uv-text text="每节课所有单词的循环练习次数" size="14px" color="#BABAD8" custom-style="opacity: 0.5;"></uv-text>
			</view>
			<view class="switch uv-flex-row">
				<uv-number-box @change="changeNumber($event,'LOOP_COUNT')" v-model="setting.LOOP_COUNT" bg-color="#38384D" color="#fff"></uv-number-box>
			</view>
		</view>
		<view class="item uv-flex-row">
			<view class="title">
				<uv-text text="错题移出须达次数" size="16px" color="#BABAD8" margin="0 0 4px 0"></uv-text>
				<uv-text text="单词若想移出错题本需答对次数，不能大于单词循环次数" size="14px" color="#BABAD8" custom-style="opacity: 0.5;"></uv-text>
			</view>
			<view class="switch uv-flex-row">
				<uv-number-box @change="changeNumber($event,'REMOVE_NEED_COUNT')" v-model="setting.REMOVE_NEED_COUNT" bg-color="#38384D" color="#fff"></uv-number-box>
			</view>
		</view>
		<view class="item uv-flex-row">
			<view class="title">
				<uv-text text="单词显示（默写课程）" size="16px" color="#BABAD8" margin="0 0 4px 0"></uv-text>
				<uv-text text="选择展示单词的所有字母、部分字母或全部不展示" size="14px" color="#BABAD8" custom-style="opacity: 0.5;"></uv-text>
			</view>
			<view class="switch uv-flex-row">
				<uv-subsection :list="write.list" key-name="name" :current="write.value" custom-style="height: 30rpx;border-radius: 4rpx;" custom-item-style="border-radius: 4rpx;" activeColor="rgba(255,255,255,1)" inactiveColor="rgba(255,255,255,0.6)"
					@change="changeSubsection($event,write)"></uv-subsection>
			</view>
		</view>
		<view class="item uv-flex-row">
			<view class="title">
				<uv-text text="单词显示（错题巩固课程）" size="16px" color="#BABAD8" margin="0 0 4px 0"></uv-text>
				<uv-text text="选择展示单词的所有字母、部分字母或全部不展示" size="14px" color="#BABAD8" custom-style="opacity: 0.5;"></uv-text>
			</view>
			<view class="switch uv-flex-row">
				<uv-subsection :list="error.list" key-name="name" :current="error.value" custom-style="height: 30rpx;border-radius: 4rpx;" custom-item-style="border-radius: 4rpx;" activeColor="rgba(255,255,255,1)" inactiveColor="rgba(255,255,255,0.6)"
					@change="changeSubsection($event,error)"></uv-subsection>
			</view>
		</view>
		<view class="item uv-flex-row">
			<view class="title">
				<uv-text text="口音/拼写（单词专项）" size="16px" color="#BABAD8" margin="0 0 4px 0"></uv-text>
				<uv-text text="选择单词的音标、读音和拼写为英式或美式" size="14px" color="#BABAD8" custom-style="opacity: 0.5;"></uv-text>
			</view>
			<view class="switch uv-flex-row">
				<uv-subsection :list="accent.list" key-name="name" :current="accent.value" custom-style="height: 30rpx;border-radius: 4rpx;" custom-item-style="border-radius: 4rpx;" activeColor="rgba(255,255,255,1)" inactiveColor="rgba(255,255,255,0.6)"
					@change="changeSubsection($event,accent)"></uv-subsection>
			</view>
		</view>
		<view class="item uv-flex-row">
			<view class="title">
				<uv-text text="课程内容顺序（单词专项）" size="16px" color="#BABAD8" margin="0 0 4px 0"></uv-text>
				<uv-text text="以固定或随机打乱的方式练习单词" size="14px" color="#BABAD8" custom-style="opacity: 0.5;"></uv-text>
			</view>
			<view class="switch uv-flex-row">
				<uv-subsection :list="order.list" key-name="name" :current="order.value" custom-style="height: 30rpx;border-radius: 4rpx;" custom-item-style="border-radius: 4rpx;" activeColor="rgba(255,255,255,1)" inactiveColor="rgba(255,255,255,0.6)"
					@change="changeSubsection($event,order)"></uv-subsection>
			</view>
		</view>
		<view class="btn-default" @click="reset(setting)">
			<text>恢复默认</text>
		</view>
	</view>
</template>
<script setup>
	import { reactive, watch, watchEffect } from 'vue';
	import useSetting from './useSetting.js';
	const { update, reset } = useSetting();
	const write = reactive({
		value: 0,
		key: 'WRITE_WORD_SHOW',
		list: [{ name: '全部显示', value: 'ALL' }, { name: '部分显示', value: 'SOME' }, { name: '不显示', value: 'NONE' }]
	})
	const error = reactive({
		value: 0,
		key: 'ERROR_WORD_SHOW',
		list: [{ name: '全部显示', value: 'ALL' }, { name: '部分显示', value: 'SOME' }, { name: '不显示', value: 'NONE' }]
	})
	const accent = reactive({
		value: 0,
		key: 'ACCENT',
		list: [{ name: '美式', value: 'US' }, { name: '英式', value: 'UK' }]
	})
	const order = reactive({
		value: 0,
		key: 'ORDER',
		list: [{ name: '固定', value: 'FIXED' }, { name: '随机', value: 'RANDOM' }]
	})
	const setting = reactive({
		LOOP_COUNT: 1,
		ACCENT: 'UK',
		ORDER: 'RANDOM',
		REMOVE_NEED_COUNT: 1,
		WRITE_WORD_SHOW: 'NONE',
		ERROR_WORD_SHOW: 'NONE'
	})
	watchEffect(() => {
		for (let key in setting) {
			setting[key] = getApp().globalData.setting?.[key];
		}
	})
	watch(() => setting.ACCENT, (newVal) => {
		accent.value = accent.list.findIndex(item => item.value == newVal);
	}, { immediate: true })
	watch(() => setting.ORDER, (newVal) => {
		order.value = order.list.findIndex(item => item.value == newVal);
	}, { immediate: true })
	watch(() => setting.WRITE_WORD_SHOW, (newVal) => {
		write.value = write.list.findIndex(item => item.value == newVal);
	}, { immediate: true })
	watch(() => setting.ERROR_WORD_SHOW, (newVal) => {
		error.value = error.list.findIndex(item => item.value == newVal);
	}, { immediate: true })
	// 修改数字
	function changeNumber(e, type) {
		update(type, e.value);
	}
	// 修改选项
	function changeSubsection(index, type) {
		type.value = index;
		const item = type.list[index];
		update(type.key, item.value);
	}
</script>
<style>
	.tab-course-en>>>.uv-number-box__plus, .tab-course-en>>>.uv-number-box__minus {
		height: 34px !important;
		cursor: pointer;
	}
	.tab-course-en>>>.uv-number-box__input {
		height: 34px !important;
	}
	.tab-course-en>>>.uv-number-box__plus--hover, .tab-course-en>>>.uv-number-box__minus--hover {
		background-color: #38384D !important;
		opacity: 0.8;
	}
	.tab-course-en>>>.uv-number-box__plus .uv-icon__icon, .tab-course-en>>>.uv-number-box__minus .uv-icon__icon {
		color: #fff !important;
	}
	.tab-course-en>>>.uv-number-box__plus--disabled, .tab-course-en>>>.uv-number-box__minus--disabled {
		opacity: 0.6;
		background-color: #38384D !important;
	}
	.tab-course-en>>>.uv-subsection__item {
		padding: 0 16px;
		cursor: pointer;
	}
	.tab-course-en>>>.uv-subsection__item .uv-subsection__item__text {
		white-space: nowrap;
	}
	.tab-course-en>>>.uv-subsection__item:hover .uv-subsection__item__text {
		color: rgba(255, 255, 255, 1) !important;
	}
	.tab-course-en>>>.uv-subsection--button {
		height: 34px !important;
		padding: 4px 6px;
		background-color: rgba(56, 56, 77, 0.6) !important;
	}
	.tab-course-en>>>.uv-subsection__bar {
		height: 26px !important;
		background-color: rgba(56, 56, 77);
	}
</style>
<style scoped lang="scss">
	@import 'common.scss';
	.tab-course-en {
		height: 320px;
		overflow-y: auto;
	}
</style>